<template>
	<view>
		<view class="my-head">
			<!-- 背景图 -->
			<view class="my-head-bgd">
				<!-- <image :src="userinfo.avator" mode="aspectFill"></image> -->
			</view>
			<view class="my-head-img">
				<view class="my-head-imgbox">
					<!-- <image src="/static/head.jpg" mode="aspectFill"></image> -->
					<image :src="userinfo.avatar" mode="aspectFill"></image>
				</view>
				<view class="my-head-infobox">
					<text class="my-head-name">{{userinfo.author_name}}</text>
					<text class="my-head-major">{{userinfo.professional}}</text>
				</view>
				
			</view>
		</view>
		<view class="my-head-info">
			<view class="my-head-info-box">
				<text class="my-head-info-box-title">关注</text>
				<text>{{userinfo.follow_count}}人</text>
			</view>
			<view class="my-head-info-box">
				<text class="my-head-info-box-title">粉丝</text>
				<text>{{userinfo.fans_count}}人</text>
			</view>
			<view class="my-head-info-box">
				<text class="my-head-info-box-title">积分</text>
				<text>{{userinfo.integral_count || 0}}</text>
			</view>
		</view>
		<view class="myContent">
			<view class="myContentList" @click="open">
				<view class="myContentListTitle">
					<uni-icons type="contact" size="26" color="#666" class="icons"></uni-icons>
					<text>我的文章</text>
				</view>
				<uni-icons type="arrowright" size="18" color="#666"></uni-icons>
			</view>
			<view class="myContentList" @click="feedback">
				<view class="myContentListTitle">
					<uni-icons type="help" size="26" color="#666" class="icons"></uni-icons>
					<text>意见反馈</text>
				</view>
				<uni-icons type="arrowright" size="18" color="#666"></uni-icons>
			</view>
			
		</view>
	</view>
</template>

<script>
	// 导入获取数据
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {

			}
		},
		computed: {
			//解析数据
			...mapState(['userinfo'])
		},
		onLoad() {
			console.log(this.userinfo);
		},
		methods: {
			open() {
				uni.navigateTo({
					url: '/pages/my-passage/my-passage'
				})
				console.log('isjump');
			},
			feedback(){
				uni.navigateTo({
					url: '/pages/feedback/feedback'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		position: relative;

		.my-head {
			padding-bottom: 5px;
			margin-top: 5%;
			margin-left: 0%;
			// .my-head-bgd {
			// 	position: absolute;
			// 	top: 0;
			// 	right: 0;
			// 	bottom: 0;
			// 	left: 0;
			// 	filter: blur(6rpx);
			// 	opacity: 0.1;

			// 	image {
			// 		width: 100%;
			// 		height: 200px;
			// 	}
			// }

			.my-head-img {
				display: flex;
				margin-left: 10%;
				// flex-direction: column;
				align-items: left;
				padding-top: 30px;

				.my-head-imgbox {
					width: 70px;
					height: 70px;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 8%;
					border: 1px solid #efefef;

					image {
						width: 100%;
						height: 100%;
					}
				}
				
				.my-head-infobox{
					display: flex;
					flex-direction: column;
					.my-head-name {
						margin-top: 5%;
						font-size: 18px;
						font-weight: bold;
					}
					.my-head-major{
						margin-top: 5%;
						font-size: 14px;
						// font-weight: bold;
					}
				}
				
				
			}

		}

		.my-head-info {
			margin-top: 5px;
			padding-top: 10px;
			display: flex;

			// border: 1px solid red;
			// border-top-left-radius: 15px; 		
			// border-top-right-radius: 15px; 
			// box-shadow: 3px -3px 10px rgb(212, 212, 212);
			.my-head-info-box {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 100%;
				font-size: 14px;
				color: #999;

				.my-head-info-box-title {
					font-size: 15px;
					color: #333;

					.icons {
						margin-right: 5px;
					}
				}
			}
		}

		.myContent {
			padding-top: 10px;
			margin-top: 10px;
			border-top-left-radius: 15px;
			border-top-right-radius: 15px;
			box-shadow: 3px -3px 10px rgb(212, 212, 212);

			.myContentList {
				display: flex;
				justify-content: space-between;
				padding: 15px;
				margin-bottom: 10px;
				background-color: #ffffff;
				color: #333;
				font-size: 14px;

				.myContentListTitle {
					padding-left: 8px;
					display: flex;
					align-items: center;

					text {
						margin-left: 8px;
					}
				}
			}
		}
	}
</style>
